/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-colorarea-border-color-disabled: GrayText;
        --highcontrast-colorarea-border-color: Canvas;
        --highcontrast-colorarea-fill-color-disabled: Canvas;
    }

    .gradient,
    :host([disabled]) {
        forced-color-adjust: none;
    }
}

:host {
    --spectrum-colorarea-border-color: #0000001a;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width));
    min-block-size: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height));
    inline-size: var(--mod-colorarea-width, var(--spectrum-color-area-width));
    block-size: var(--mod-colorarea-height, var(--spectrum-color-area-height));
    box-sizing: border-box;
    border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
    border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
    display: inline-block;
    position: relative;
}

:host([focused]) {
    z-index: 1;
}

:host([disabled]) {
    pointer-events: none;
    background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color)));
    border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color-disabled);
}

:host([disabled]) .gradient {
    display: none;
}

.handle {
    transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-color-area-width)) - var(--spectrum-color-area-border-width)));
    inset-block-start: 0;
}

.handle:dir(rtl),
:host([dir="rtl"]) .handle {
    inset-inline-end: 0;
}

.gradient {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding));
}

.slider {
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 0;
    pointer-events: none;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}
